<template>
  <div class="page settingAddPage">
    <div class="page-waprrer" style="overflow: hidden">
      <Scroll :data="listBox.data">
        <div>
          <!--settingAdd-topInfor 开始-->
          <div class="settingAdd-topInfor">

            <div class="topInfor">

              <group>
                <x-input required ref="inputPhone" title="手机号" mask="999 9999 9999" v-model="form.mobile" :max="13"></x-input>
                <x-input required ref="inputName" title="备注名" v-model="form.name" :min="2" :max="20"></x-input>
              </group>

              <x-button type="primary" class="topInfor-sumbit" @click.native="openAdd" >添加</x-button>

            </div>

          </div>
          <!--settingAdd-topInfor 结束-->

          <!--settingAdd-listBox start-->
          <div class="settingAdd-listBox">

            <div class="listBox">

                <div class="listBox-top">
                  <x-button @click.native="updateListBox(1)" type="primary" :show-loading="listBox.loading" mini class="listBox-updateBtn">最近登录</x-button>
                </div>

                <ul class="listBox-list" v-if="listBox.data.length >= 1">
                    <li class="listBox-list-item pure-g" v-for="item in listBox.data" :key="item.id">
                       <div class="pure-u-7-24">
                          {{item.name}}
                       </div>
                       <div class="pure-u-7-24">
                          {{item.mobile}}
                       </div>
                       <div class="pure-u-7-24">
                          {{item.addtime}}
                       </div>
                       <div class="pure-u-3-24">
                          <span class="item-deleteBtn" @click="openDelete(item.id)">
                            删除
                          </span>
                       </div>
                    </li>
                </ul>

               <LoadMore :show-loading="false" v-else-if="listBox.data.length === 0" :tip="'暂无数据'"></LoadMore>


                <div class="listBox-paginate" id="listBox-paginate" v-if="listBox.data.length > 0">
                  <Paginate v-if="listBox.maxpage > 1" :click-handler="goHref" ref="paginate" :margin-pages="1" :page-count="listBox.maxpage" :containerClass="'pagination pagination-sm'" :prev-text="'<'" :next-text="'>'"></Paginate>
                </div>

            </div>

          </div>
          <!--settingAdd-listBox end-->

        </div>

        <Actionsheet v-model="deleteActionsheet.state" :menus="deleteActionsheet.menus" show-cancel @on-click-menu-delete="deleteItem" ></Actionsheet>

        <Actionsheet v-model="addActionsheet.state" :menus="addActionsheet.menus" show-cancel @on-click-menu-delete="add" ></Actionsheet>

      </Scroll>

    </div>
  </div>
</template>
<script>
  import {addInfor,getlist,deleteItem} from "api/setting";
  import {XInput, Group, XButton, Actionsheet,LoadMore} from 'vux';
  import {mapGetters, mapMutations} from "vuex";
  import Paginate from 'vuejs-paginate';
  import Scroll from "base/scroll/scroll";
  import Bus from "common/js/bus";
  import _ from "lodash";

  export default {
    data() {
      return {
        form: {
          mobile: null,
          name: null,
          pid:"",
        },
        listBox:{
          loading:false,
          data:[],
          maxpage:1,
          page:1,
        },
        deleteActionsheet:{
          state:false,
          menus:{
            'title.noop': "是否确认删除",
            delete: '<span style="color:red">删除</span>'
          },
          select:""
        },
        addActionsheet:{
          state:false,
          menus:{
            'title.noop': "是否确认添加",
            delete: '<span style="color:red">添加</span>'
          }
        }
      }
    },
    methods: {
      alert(title, content, onHide = () => {}, onShow = () => {}) {
        this.$vux.alert.show({title, content, onShow, onHide})
      },
      add() {
          Bus.$emit("loading-on");
          this.form.pid = this.user_id;
          addInfor(this.form).then((Rs) => {
            Bus.$emit("loading-off");
            Rs.status === 0? this.alert('提示','添加成功',()=>{
              this.updateListBox();
            }):this.alert("提示", "添加失败,账户已有或者重复");
          })
      },
      updateListBox(p=1){
         this._getList(p);
      },
      deleteItem(id = this.deleteActionsheet.select){
        Bus.$emit('loading-on');
        deleteItem({id,pid:this.user_id}).then((Rs)=>{
           if(Rs.code !== -1){
               Bus.$emit('loading-off');
               this.alert('提示', "删除成功",()=>{
               this.updateListBox(this.listBox.page);
             });
           }else{
             this.alert('提示', "删除失败");
           }
        });
      },
      _getList(p=1){
        this.listBox.loading = true;
        Bus.$emit('loading-on');
        setTimeout(()=>{
          getlist({id:this.user_id,page:p}).then((Rs)=>{
            this.listBox.loading = false;
            this.listBox.data = Rs.data;
            this.listBox.maxpage = Math.ceil(Rs.total/Rs.per_page);
            Bus.$emit("loading-off");
            this.$refs.paginate.handlePageSelected(p - 1);
          })
        },500);
      },
      goHref(page){
        this.listBox.page = page;
        this._getList(page);
      },
      openAdd(){
        //依次激活
        this.$refs.inputPhone.focus();this.$refs.inputName.focus();
        if (!this.$refs.inputPhone.valid || !this.$refs.inputName.valid) {
          this.alert('错误', "验证失败");
        } else {
          this.addActionsheet.state = true;
        }
      },
      openDelete(id){
         this.deleteActionsheet.select = id;
         this.deleteActionsheet.state = true;
      },
      ...mapMutations({
        "setCommonHeader": "SET_COMMON_HEADER",
        "setCommonLoading":"SET_COMMON_LOADING"
      })
    },
    components: {
      Scroll,
      XInput,
      Group,
      XButton,
      Paginate,
      Actionsheet,
      LoadMore
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        _.delay(() => {
          vm.setCommonHeader(2);
        }, 500);
      })
    },
    computed:{
      ...mapGetters(['user_phone','user_id'])
    },
    mounted(){
      this._getList();
    }
  }
</script>
<style lang="less">
  @import "../common/style/helpers/mixins";

  .settingAdd-topInfor {
    margin-top: 45px;

    .topInfor {
      padding: 0.25rem 0;
      border-bottom: 1px solid #ccc;

      &-sumbit {
        margin-top: 20px;
        background-color: #c7a45b !important;
        width: 50%;
        line-height: 1.8;
      }
    }
  }

  .settingAdd-listBox{
    .listBox{

      &-top{
        width: 100%;
        padding: 0.3rem 0  0.1rem 0;
        display: flex;
        justify-content: flex-end;
        border-bottom: 1px solid #ccc;
      }

      &-updateBtn{
        padding: 0 0.1rem;
        margin: 0 1.2rem 0 0;
        line-height: 1.8;
        background-color: #5f5e6c !important;
      }

      &-list{
        width: 100%;

        &-item{
          height: 0.5rem;
          line-height: 0.5rem;
          border-bottom: 1px solid #ccc;

          >div{
            .omit();
            font-size: 0.24rem;
            text-align: center;
            color: #5c5e6c;
          }

          .item-deleteBtn{
            display: inline-block;
            padding: 0 0.15rem;
            background: #5c5e6c;
            border-radius: 0.1rem;
            height: 0.35rem;
            line-height: 0.35rem;
            color: #fff;
          }
        }
      }

      &-paginate{
        text-align: center;
        height: 2rem;
      }

      #listBox-paginate{
        .pagination{

        }
      }
    }
  }
  html{
    .weui-loadmore_line .weui-loadmore__tips{
      background-color: #fbf9fe;
    }
  }
</style>
